<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 问题？指定的对象在JSX中不可以被渲染。
    // 有一个特殊的对象可以指定，虚拟DOM对象
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    root.render((
        <div>
            <h3 style={{color:"red"}}>今天天气不错</h3>
            <p>什么是幸福？幸福就是我没有认真听讲，结果发现认真听讲的同学也没有听懂，这就是幸福！</p>
            {React.createElement("button",{
                style:{
                    color:"green"
                }
            },"你过来呀！")}
        </div>
    ));
</script>
</html>